<template>
<!-- 轮播图组件 -->
    <div class="wrapper">
        <swiper :options="swiperOptions" v-if="showSwiper">
            <swiper-slide v-for="item of list" :key="item.id">
                <img class="swiper-img" 
                :src="item.imgUrl" />
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
  </div>
</template>

<script>
export default {
    name: 'HomeSwiper',
    props:{
        list: Array
    },
    data () {
        return{
            swiperOptions:{
                pagination: '.swiper-pagination',
                loop: true //这个是表示支持循环轮播
            }
            // 图片和swiper-slide直接输出 要进行循环输出
            // swiperList:[{
            //     id: '0001',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1802/e3/62ce7362ca051d02.jpg_640x200_6db551b7.jpg'
            // },{
            //     id: '0002',
            //     imgUrl: 'http://img1.qunarzz.com/piao/fusion/1801/93/ce59d182aca07102.jpg_640x200_ba03d44c.jpg'
            // }]
        }
    },
    computed:{
        showSwiper(){
            return this.list.length
        } 
    }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
// scoped这个只修饰当前组件的样式，不会对其他组件进行任何的影响
// wrapper下面所有的子组件只有出现swiper-pagination-bullet-active都变成红色,
// 这样就不会受到scoped的限制
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
// 使得父元素里面的图片大小自适应
.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25%
    background: #eee
.swiper-img
    width: 100%
</style>